<template>
  <div ref="tag" class="tag_box" :class="[tagXY.index!==null?'show':'']" :style="{top:topY+'px',left:-width+'px',width:width+'px'}" @mouseover="tagMouseover" @mouseleave="tagMouseleave">
    <div class="tag_content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name:"TagBox",
  props:{
    tagXY:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    width:{
      type:String | Number,
      default:'220'
    }
  },
  data(){
    return{
      topY:null
    }
  },
  watch:{
    tagXY:{
      deep:true,
      handler:function(newV){
        this.$nextTick(()=>{
          let h = this.$refs['tag'].clientHeight;
          let y = this.tagXY.y-80;
          y > ( window.innerHeight - 80 -  h ) ? this.topY = window.innerHeight -80- h : this.topY = y
        })
      },
      immediate:true
    }
  },
  methods:{
    tagMouseover(){
      this.$emit('tagMouseover')
    },
    tagMouseleave(){
      this.$emit('tagMouseleave')
    }
  }
}
</script>

<style>
.tag_box{
  width: 220px;
  padding: 5px;
  background:#10234a;
  color: #fff;
  opacity: 0;
  height: 0;
  position: absolute;
  transition: .3s;
  top: 0;
  left: 0;
}
.show{
  opacity: 1;
  height: auto;
}
.tag_content{
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 255, 255, .4);
  padding: 10px;
}
</style>